<template>
    <div class='box'>
        <!-- 搜索栏 -->
        <div class="search">
            <el-card class="card" shadow="never" :body-style="{ paddingBottom: '0' }">
                <el-form ref="queryForm" :inline="true">
                    <el-form-item>
                        <el-date-picker
                            v-model="transferVal"
                            type="daterange"
                            range-separator="-"
                            :start-placeholder="$t('ztu0TpvwBrwVxjieshushijian')"
                            :end-placeholder="$t('ztu0TpvwBrwVxkaishisjian')"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click='searchClick'  icon="ele-Search" type="primary" > {{ $t('gCfnriWqoYBbtTUitKqI') }} </el-button>
                        <el-button   @click="resetClick" icon="ele-Refresh"  > {{ $t('otahMpwpwvM772i15GuCz') }} </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>

        <div class="content">
            <!-- 表格 -->
            <p class="table">
                <el-table :data="list"  :border="parentBorder" style="width: 100%">
                    <el-table-column type="expand">
                        <template #default="props">
                            <!-- <el-table :data="props.row.items" class="w-h-100" max-height="300" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                <el-table-column type="index" :label="$t('3eKEs1bExAXarYpdJemp')" width="55" align="center" :index="indexMethod" />
                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="d_CreateTime" :label="$t('qT98SYjsJngYa6KEo2R3Y')" align="center" />
                                <el-table-column min-width="60" :show-overflow-tooltip="true" prop="v_ItemTypeName" :label="$t('8LrC6VOt29kaZYnnC5R')" align="center" />
                                <el-table-column min-width="110" :show-overflow-tooltip="true" prop="v_ResolveResult.wareHatTotal" :label="$t('sHnGbYeZh5fC8CPnmxxSv')" align="center" />
                                <el-table-column min-width="130" :show-overflow-tooltip="true" prop="v_ResolveResult.noWareHatTotal" :label="$t('rO3kynL1Izftm9DjI3h')" align="center" />
                                <el-table-column min-width="110" :show-overflow-tooltip="true" prop="v_ResolveResult.wareClothesTotal" :label="$t('5LszsSwgvZXzxcrfp4e')" align="center" />
                                <el-table-column min-width="130" :show-overflow-tooltip="true" prop="v_ResolveResult.noWareClothesTotal" :label="$t('suRb6YgYq00v1lf2TuPbH')" align="center" />
                                <el-table-column min-width="120" :label="$t('rQ5NRdsIr9n8f_8WvQuu')" align="center" fixed="right">
                                    <template #default="scope">
                                        <el-button @click="playClick(hostAddress + scope.row.v_FilePath, scope.row)" class="icon-e" icon="ele-View" size="small" text type="primary"> {{ $t('b6TYx9jDZpHwIlu0CbhoE') }} </el-button>
                                    </template>
                                </el-table-column>
                            </el-table> -->
                            <picture-recognition  :options="props.row.items"></picture-recognition>

                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="130" :label="$t('vs4SxZxVBobu5ks3A9UOv')" prop="v_FileDate" />
                    <el-table-column align="center" :label="$t('hdHNeDsLhoC5H51Oksh7Z')" prop="v_StartTime" />
                    <el-table-column align="center" :label="$t('xeTMmBfz2od49VjMIsnsn')" prop="n_PatrolPlanId" />
                </el-table>
            </p>
        </div>

        <!-- 页码 -->
        <div class="pagination">
            <el-pagination
                v-model:currentPage="pageNo"
                v-model:page-size="pageSize"
                :total="totalRows"
                :page-sizes="[10, 20, 50, 100]"
                small
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                popper-class="selectBottom" class="page"
            />
        </div>

        <!-- 弹窗 -->
        <el-dialog
            v-model="innerVisible"
            width="50%"
            :title="imgTitle"
            append-to-body
        >
            <el-image :fit="cover" style="width: 100%; min-height: 500px;cursor:pointer;" @click="lookImg(imgPath)" :preview-src-list="[imgPath]" :src="imgPath">
                <template #placeholder>
                    <div v-loading="true" style="width: 100%; height: 100%;"></div>
                </template>
            </el-image>
        </el-dialog>

        <!-- <div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
                    <div style="box-sizing: border-box;">
                        <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                            <el-form class="box-f" ref="queryForm" :inline="true">
                                <el-form-item>
                                    <el-date-picker
                                        v-model="transferVal"
                                        type="daterange"
                                        range-separator="-"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD"
                                    />
                                </el-form-item>
                                <el-form-item class="set-s">
                                    <el-button type="primary" plain @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                                    <el-button @click='searchClick' type="primary" icon="ele-Search"> 查询 </el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>

                    <div style="box-sizing: border-box;" class="flex-1 pos-r">
                        <div class="pos-a w-h-100" style="box-sizing: border-box;">
                            <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                                <div style="" class="w-h-100 ver-flex">
                                    <div class="flex-1 pos-r">
                                        <div class="pos-a w-h-100">
                                            <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                                <el-table-column type="index" :label="$t('3eKEs1bExAXarYpdJemp')" width="55" align="center" :index="indexMethod" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="d_CreateTime" label="创建时间" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_WareHatTotal" label="戴安全帽总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_NoWareHatTotal" label="未戴安全帽总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_WareClothesTotal" label="穿反光衣总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_NoWareClothesTotal" label="未穿反光衣总数" align="center" />
                                                <el-table-column min-width="130" label="操作" align="center" fixed="right">
                                                    <template #default="scope">
                                                        <el-button @click="playClick(hostAddress + scope.row.v_FilePath)" class="icon-e" icon="ele-View" size="small" text type="primary"> 查看 </el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                        <el-pagination
                                            v-model:currentPage="pageNo"
                                            v-model:page-size="pageSize"
                                            :total="totalRows"
                                            :page-sizes="[10, 20, 50, 100]"
                                            small
                                            background
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            class="w-h-100"
                                        />
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div> -->
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRaw, watch } from 'vue'
import getTableData from '/@/utils/getTableData'
import PictureRecognition from '/@/components/AlgorithmRecognition/PictureRecognition.vue'
import { getQueryGroupPageListApi } from '/@/api/its/its'
import { dayjs } from 'element-plus'
export default defineComponent( {
    name: 'drone-resolve-result',
    components: {PictureRecognition },
    props:['isShowDialog', 'item'],
    setup(props,ctx){
        const hostAddress = ref(import.meta.env.VITE_API_URL) // 获取地址
        const innerVisible = ref(false)
        const imgPath = ref('')
        const imgTitle = ref('')
        let srcList:any = []
        let imgOrVideoName = ref('')
        const parentBorder = ref(false)
        const childBorder = ref(false)
        // 搜索类
        const transferVal = ref() // 需要查询的值
        let searchObj:any = reactive({
            v_DeviceCode: props.item.v_RemoteDeviceId || '', 
            startTime: dayjs(new Date(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDate())).format('YYYY-MM-DD'),
            endTime: dayjs(new Date()).format('YYYY-MM-DD'),
            timestamp: 0,
        })
        /*** searchClick 查询按钮 */
        const searchClick = () => {
            if(toRaw(transferVal.value) && toRaw(transferVal.value)!== ''){
                searchObj.startTime = toRaw(transferVal.value)[0]
                searchObj.endTime = toRaw(transferVal.value)[1]
            }else{
                // ElMessage({
                //     type: 'warning',
                //     message: '请选择需要查询的日期',
                //     duration: 1000,
                //     onClose: ()=>{
                //         resetClick()
                //     } 
                // })
                searchObj.startTime = null
                searchObj.endTime = null
            }
            searchObj.timestamp = new Date().getTime();
        }
        /*** resetClick 重置按钮 */
        const resetClick = () => {
            transferVal.value = ''
            searchObj.startTime = '';
            searchObj.endTime = '';
        }
        // 搜索类

        /*** handleClose 关闭事件 */
        const handleClose = (val:any) => {
            ctx.emit('close')
        }

        /*** lookImg 查看图片 */
        const lookImg = (val:any) => {
            srcList = []
            srcList.push(val.v_FilePath)
        }

        /*** playClick 查看大图 */
        const playClick = (val:any, title:any) => {
            imgPath.value = val;
            imgTitle.value = title.v_ItemTypeName;
            innerVisible.value = true;
        }

        watch(
            ()=> props.item,
            (newVal)=>{
                if(newVal){
                    const t = new Date(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDate())
                    const startTime = dayjs(t).format('YYYY-MM-DD');
                    transferVal.value = [startTime, dayjs(new Date()).format('YYYY-MM-DD')]
                    searchObj.startTime = startTime
                    searchObj.endTime = dayjs(new Date()).format('YYYY-MM-DD')
                    //
                }else{
                    transferVal.value = []
                }
            },{
                immediate:true, deep:true
            }
        )


        return {
            // ...getTableData(SafetyHatQueryResolveResultPageList,{},searchObj),
            ...getTableData(getQueryGroupPageListApi,{},searchObj),

            // 搜索类
            transferVal,
            resetClick,
            searchClick,
            // 搜索类
            parentBorder,
            childBorder,
            handleClose,
            innerVisible,
            imgPath,
            imgTitle,
            lookImg,
            cover: 'cover',
            hostAddress,
            playClick,
            imgOrVideoName,
        }
    },
} )
</script>
<style lang="scss">
.box{
    display: flex;
    flex-direction: column;
    .search{
        display: flex;
        width: 100%;
        .card{
            height: 100%;
        }
    }
    .content{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 70px;
        .table{
            padding-left: 10px;
        }
    }
    .pagination{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        line-height: 100%;
        background-color: #fff;
        z-index: 99999999;
        .page{
            position: absolute;
            bottom: 0;
            left: 30px;
            line-height: 100%;
        }
    }
}

.selectBottom{
    position: absolute;
    top: auto !important;
    bottom: 34px !important;
    z-index: 99999;
}
</style>
